<template>
  <div id="cpn-add-article-field" :class="{ open: openWriter }">
    <transition name="writeArticle_fade" mode="out-in">
      <div class="writeArticle" v-show="openWriter">
        <div class="articleWrap">
          <editor-field v-model="pForm.content" />
          <div class="publishPanel" :class="{ hiddenPublishPanel: !isShowPanel }" :key="key">
            <div class="arrow" @click="panelToggle">
              <i class="iconfont icon-jiantouxi"></i>
            </div>
            <el-form ref="pForm" :model="pForm" :rules="rules" label-width="auto" class="pForm">
              <el-form-item prop="title">
                <fcInput v-model="pForm.title" placeholder="文章标题"></fcInput>
              </el-form-item>
              <el-form-item>
                <fcInput v-model="pForm.description" placeholder="文章描述"></fcInput>
              </el-form-item>
              <el-form-item prop="categoryId">
                <fcInput v-model="pForm.categoryId" placeholder="文章分类" type="select">
                  <template #select>
                    <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </template>
                </fcInput>
              </el-form-item>
              <el-form-item>
                <upload-field v-model="pForm.cover" placeholder="文章封面" />
              </el-form-item>
            </el-form>
          </div>
          <div class="save">
            <aBtn class="left" @click="cancel" message="不保存内容(;´༎ຶД༎ຶ`)">
              <i class="iconfont icon-chacha"></i>
            </aBtn>
            <aBtn class="right" @click="confirm" message="保存并发布（*＾3＾）">
              <i class="iconfont icon-duihao"></i>
            </aBtn>
          </div>
        </div>
        <div class="closeBg"></div>
        <div class="close" @click="close">
          <i class="iconfont icon-cha f22"></i>
        </div>
      </div>
    </transition>
    <dragBall-field @click.native="write" class="dragBall" width="65px" height="65px">
      <div class="fBtnBox" :class="{ 'jello-horizontal': rotateCenter, 'rotate-shake': openWriter }">
        <img class="fBtnImg" :src="fBtnImg" alt="">
      </div>
    </dragBall-field>
  </div>
</template>

<script>
import DragBallField from '@/components/DragBallField'
import EditorField from '@/components/EditorField'
import TableBtnBarField from '@/components/TableBtnBarField'
import UploadField from '@/components/UploadField'
import { addArticleApi } from '@/api/article'
import { getAllCategoryApi } from '@/api/category'
export default {
  name: 'addActicle-field',
  components: {
    [DragBallField.name]: DragBallField,
    [EditorField.name]: EditorField,
    [TableBtnBarField.name]: TableBtnBarField,
    [UploadField.name]: UploadField
  },
  props: {
    isShowCreateAnime: {
      typeof: Boolean,
      default: true
    }
  },
  data() {
    return {
      fBtnImg: require('@/assets/img/write.png'),
      key: 0,
      rotateCenter: false,
      openWriter: false,
      isShowPanel: false,
      rules: {
        title: [
          { required: true, message: '请输入文章标题', trigger: 'change' }
        ],
        categoryId: [
          { required: true, message: '请选择文章分类', trigger: 'change' }
        ]
      },
      categoryList: [],
      pForm: {
        content: '', // 富文本html数据
        title: ''
      }
    }
  },
  mounted() {
    this.createAnime()
    this.getCategory()
  },
  methods: {
    getCategory() {
      getAllCategoryApi().then(res => {
        this.categoryList = res.data
      })
    },
    panelToggle() {
      this.isShowPanel = !this.isShowPanel
    },
    write() {
      this.openWriter = !this.openWriter
    },
    // 保存
    confirm() {
      this.$refs.pForm.validate((valid) => {
        if (valid) {
          if ($chy.isEmpty(this.pForm.content) || this.pForm.content === '<p><br></p>') {
            this.$message({
              type: 'error',
              message: '文章内容不能为空！！！'
            })
            return
          }
          addArticleApi(this.pForm).then(res => {
            console.log(res)
            if (res.code === 1) {
              this.$message({
                type: 'success',
                message: '发布成功'
              })
              this.initData()
              this.openWriter = false
              this.$emit('success')
            } else {
              this.$message({
                type: 'error',
                message: '网络异常，请稍后再试！！！'
              })
            }
          })
        } else {
          this.isShowPanel = true
        }
      })
    },
    // 取消保存
    cancel() {
      this.openWriter = false
      this.initData()
    },
    // 关闭窗口
    close() {
      this.openWriter = false
      this.isShowPanel = false
    },
    initData() {
      this.pForm = {
        content: '', // 富文本html数据
        title: ''
      }
      this.isShowPanel = false
      setTimeout(() => {
        this.key++
      }, 1000)
    },
    createAnime() {
      if (this.isShowCreateAnime) {
        this.rotateCenter = true
        setTimeout(() => {
          this.rotateCenter = false
        }, 1000)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.open {
  position: absolute;
  z-index: 9;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

#cpn-add-article-field {
  .writeArticle {
    width: 80vw;
    height: 75vh;
    box-shadow: 3px 3px 20px 2px #8f8f8f;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;

    .articleWrap {
      width: 100%;
      height: 100%;
      position: absolute;
      overflow: hidden;
    }

    .fcWave {
      width: 421px;
      height: 36px;

      .left {
        width: 100%;
        height: 100%;
        background-color: red;
      }
    }

    #cpn-editor-field {
      height: calc(100% - 36px);
    }

    .save {
      // position: relative;
      // display: flex;
      justify-content: space-evenly;
      align-items: center;
      height: 36px;
      // bottom: -4px;
      z-index: 2;

      .left,
      .right {
        position: absolute;
        width: 52%;
        height: 36px;
        padding: 7px 0;
        box-sizing: border-box;
        cursor: pointer;

        i {
          color: #fff;
        }
      }

      .left {
        background-color: $red;
        left: 0;
        clip-path: polygon(0% 100%, 94% 100%, 100% 0%, 0% 0%);
      }

      .right {
        background-color: $green;
        right: 0;
        clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 6% 0%);
      }
    }

    .publishPanel {
      position: absolute;
      left: 50%;
      bottom: 36px;
      transform: translateX(-50%);
      border-radius: 15px;
      width: 470px;
      height: calc(80% - 36px);
      background-color: $themeColor4;
      box-shadow: $boxShadow1;
      padding: 36px 43px 10px;
      box-sizing: border-box;
      transition: .7s;

      .arrow {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        background: $themeColor1;
        border-radius: 0 0 25px 25px;
        width: 50px;
        height: 25px;
        cursor: pointer;
        // clip-path: polygon(6% 100%, 94% 100%, 100% 0%, 0% 0%);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: .7s;

        i {
          transition: .7s;
          color: $white;
        }
      }

      .pForm {}
    }

    .hiddenPublishPanel {
      bottom: calc(36px - 80% + 33px);
      transition: .7s;

      .arrow {
        border-radius: 25px 25px 0 0;
        top: -25px;
        transition: .7s;

        i {
          transform: rotateX(180deg);
          transition: .7s;
        }
      }
    }

    .closeBg {
      position: absolute;
      right: -8px;
      top: -8px;
      z-index: -1;
      background-color: #fff;
      border-radius: 50%;
      width: 33px;
      height: 33px;
      box-shadow: 3px -3px 20px 2px #8f8f8f;
    }

    .close {
      position: absolute;
      right: -8px;
      top: -8px;
      background-color: #fff;
      border-radius: 50%;
      width: 33px;
      height: 33px;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1;
      cursor: pointer;
    }

    .close:hover {
      -webkit-animation: rotate-center 0.6s ease-in-out both;
      animation: rotate-center 0.6s ease-in-out both;
    }
  }

  .fBtnImg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .dragBall:hover .fBtnBox {
    // -webkit-animation: jello-horizontal 0.6s ease-in-out both;
    // animation: jello-horizontal 0.6s ease-in-out both;
  }

  .jello-horizontal {
    -webkit-animation: jello-horizontal 0.6s ease-in-out both;
    animation: jello-horizontal 0.6s ease-in-out both;
  }

  .rotate-shake {
    -webkit-animation: rotate-shake .2s ease-in-out both;
    animation: rotate-shake .2s ease-in-out both
  }

  .writeArticle_fade-enter-active {
    transition: all 0.7s ease;
  }

  .writeArticle_fade-leave-active {
    transition: all 0.7s ease;
  }

  .writeArticle_fade-enter,
  .writeArticle_fade-leave-to {
    position: absolute;
    transform: translate(-50%, -50%) scale(0.05);
    top: 0;
    opacity: 0;
  }

  .writeArticle_fade-enter-to,
  .writeArticle_fade-leave {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    opacity: 1;
  }

}
</style>